<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字点选验证码</title>
    <style>
        #captcha-container {
            position: relative;
            overflow: hidden;
            border-radius: 3px;
        }

        .selected-word {
            position: absolute;
            z-index: 9999;
            width: 25px;
            height: 25px;
            border: 3px solid #fff;
            color: #fff;
            background-color: #0D47A1;
            font-size: 14px;
            text-align: center;
            line-height: 18px;
            border-radius: 50%;
            box-sizing: border-box;
            box-shadow: 0 0 10px black;
        }

        .control-body {
            width: 310px;
            .control-box {
                position: relative;
                width: 100%;
                background-color: #eef1f8;
                margin-top: 20px;
                border-radius: 3px;
                box-shadow: 0 0 8px rgba(240, 240, 240, 0.6) inset;

                .control-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 14px;
                    color: #b7bcd1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: center;
                    width: 100%;
                }
            }
        }
    </style>
</head>
<body>
<div id="captcha-container" style="height: 155px" onclick="handleClick(event)">
    <img id="backgroundImage" width="310" height="155" style="width: 310px; height: 155px"/>
</div>
<div class="control-body">
    <div class="control-box" style="height:30px">
        <div class="control-text" id="prompt-text"></div>
    </div>
</div>
<button id="submit-btn" disabled>提交</button>
<button onclick="refreshCaptcha()">刷新验证码</button>
<script>
    const captchaContainer = document.getElementById('captcha-container');
    const submitBtn = document.getElementById('submit-btn');
    let selectedWords = [];
    let verifyWordCount = 0, clickWordCount = 0;
    let captchaData;

    function handleClick(event) {
        let coordinate = {
            x: event.offsetX,
            y: event.offsetY
        };
        if (clickWordCount < verifyWordCount) {
            clickWordCount++;
            let div = document.createElement('div');
            div.className = 'selected-word';
            div.style.left = coordinate.x - 10 + 'px';
            div.style.top = coordinate.y - 10 + 'px';
            div.innerText = clickWordCount;
            captchaContainer.appendChild(div);
            selectedWords.push(coordinate)
            if (clickWordCount === verifyWordCount) {
                submitBtn.disabled = false;
            }
        } else {
            submitBtn.disabled = false;
        }
    }

    function refreshCaptcha() {
        // 获取验证码
        fetch('http://localhost:8080/captcha/get?key=123456&category=WORD_CLICK')
            .then(response => response.json())
            .then(data => {
                captchaData = data;
                document.getElementById('backgroundImage').src = data.wordClickImageBase64;
                document.getElementById('prompt-text').innerText = '【请按顺序点选】' + data.words;
                const wordsArr = data.words.split(',');
                selectedWords = [];
                clickWordCount = 0;
                verifyWordCount = wordsArr.length;
                document.querySelectorAll('.selected-word').forEach(element => element.remove());
            })
            .catch(error => console.error('获取验证码失败:', error));
    }

    // 提交验证码
    submitBtn.addEventListener('click', () => {
        const payload = {
            identity: captchaData.identity,
            category: 'WORD_CLICK',
            coordinates: selectedWords
        };
        fetch('http://localhost:8080/captcha/verify', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        })
            .then(response => response.json())
            .then(data => {
                console.log('验证结果:', data);
                if (data && data === true) {
                    alert('验证成功!');
                } else {
                    alert('验证失败');
                    refreshCaptcha(); // 刷新验证码
                }
            })
            .catch(error => console.error('验证失败:', error));
    });

    // 页面加载时自动刷新验证码
    window.onload = refreshCaptcha;
</script>
</body>
</html>
